<template>
  <div class="TemplateDetail">
    <div class="page-head">
      <div class="page-bread">
        <div class="bread-prev" @click="back">
          数据模板
        </div>
        <div class="bread-divider">
          /
        </div>
        <div class="bread-now">
          数据详情
        </div>
      </div>
      <div class="bread-info">
        <span>业务模板名称：{{$route.query.name}}</span>  
        <span class="ml15"> CNC类型：{{$route.query.cnc_name}}</span>
      </div>
      <div class="page-tool">
        <!-- <el-select
          v-model="data_type"
          placeholder="数据类别筛选"
          class="tool-sel"
          clearable
          @change="getList"
        >
          <el-option
            v-for="item in data_typeSel"
            :key="item.k"
            :label="item.v"
            :value="item.k">
          </el-option>
        </el-select> -->
        <search-input placeholder="参数名称搜索" @search="searchChange" />
      </div>
    </div>
    <div class="page-body">
      <div class="table_data">
        <el-table :data="tableData" stripe border :fit="true" :height="$tableHeight">
          <el-table-column
            prop="name"
            label="参数名称"
          >
          </el-table-column>
          <el-table-column
            prop="field"
            label="参数别名"
          >
          </el-table-column>
          <el-table-column
            prop="addr"
            label="地址"
          >
          </el-table-column>
          <el-table-column
            prop="field_type"
            label="类型"
          >
            <template slot-scope="{ row }">
              <div>
                {{ field_typeSel.find((s) => s.k == row.field_type).v }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
          >
          </el-table-column>
        </el-table>

      </div>
      <div class="page-footer">
        <pagina-tion
          class="page-pager"
          v-show="total >= 0"
          :background="true"
          :total="total"
          :offset.sync="offset"
          :limit.sync="limit"
          @pagination="getChangePage"
          @sizeChange="getSizePage"
        />
      </div>
    </div>

  </div>
</template>

<script>
import * as api from "@/api";
import { limit, smallLimit } from "@/consts/consts";
import searchInput from "@/components/libs/searchInput";
import paginaTion  from "@/components/libs/paginaTion";



export default {
  components:{
   searchInput,
   paginaTion
  },
  name: 'templateDetail',
  data() {
    return {
      limit,
      total: 0,
      offset: 0,
      tableData: [],
      data_type:'',
      data_typeSel: [],
      cnc:'',
      cncSel: [],
      field_typeSel: [],
    }
  },


  methods: {
    back() {
      this.$router.go(-1)
    },
    searchChange(e) {
      this.search = e;
      this.offset = 0;
      this.getList();
    },

    getChangePage(val) {
      this.offset = val.offset;
      this.getList();
    },
    
    getSizePage(val) {
      this.offset = 0
      this.getList();
    },
        
    // 下拉列表
    async downList(type) {
      const { code, data } = await api.dropdown(this).downList({
        type
      })
      if (code === 0) {
        this[`${type}Sel`] = data
      }
    },

    // 列表
    async getList() {
      const { code, data, total } = await api.template(this).templateDetail({
        template_id: this.$route.query.id,
        data_type: this.data_type,
        name: this.search,
        offset: this.offset,
        limit: this.limit,
      });
      if (code === 0) {
        this.tableData = data.group
        this.total = total
      }
    },

    async init() {
      await this.downList('field_type')
      await this.getList()
    }
  },
  created() {
    this.init()
  },
};
</script>

<style lang="stylus">
.TemplateDetail {
  
}

</style>